<template>
  <div class="report-manage-container">
    <el-row :gutter="6">
      <el-col :span="5">
        <div class="report-options">
          <div class="equ-info">
            <div class="equ-info-top">
              <div class="equ-info-top-left">
                <vab-icon icon="keyboard-box-fill" style="font-size: 36px" />
              </div>
              <div class="equ-info-top-right">
                <div class="equ-info-top-right-name">
                  <div class="name-label">
                    {{ state.equipData.equipName }}
                  </div>
                  <vab-icon
                    icon="refresh-fill"
                    style="font-size: 18px"
                    @click="toChangeEqu"
                  />
                </div>
                <div
                  style="
                    font-size: 14px;
                    line-height: 18px;
                    color: #ffffff;
                    border-bottom: 1px solid #00000000;
                  "
                >
                  <label style="margin: 0 6px">
                    {{ state.equipData.banciDate }}
                  </label>
                  {{ state.equipData.banciName }}
                </div>
              </div>
            </div>
            <div class="equ-info-bottom">
              <div class="equ-info-bottom-user">
                {{ state.equipData.zhuUserName }}
              </div>
              <div class="equ-info-bottom-fuuser">
                <div style="margin: 0 6px">
                  {{ (state.equipData && state.equipData.fuUserName) || '' }}
                </div>
              </div>
            </div>
          </div>
          <div class="dispatch-list-root">
            <moldDispatchItem
              v-if="state.dispatchData"
              :dispatch-data="state.dispatchData"
              @to-change-order="toChangeOrder"
            />
          </div>
          <!-- {{ state.dispatchData }} -->
          <div v-if="state.dispatchData" class="option-btns">
            <el-row :gutter="6">
              <!-- v-if="state.dispatchData.isShoujian" -->
              <el-col :md="8" :sm="12" style="margin-top: 12px" :xs="12">
                <button
                  class="tech-button"
                  @click="toClick('reportInspection')"
                >
                  <vab-icon icon="shield-check-line" />
                  首检
                </button>
              </el-col>
              <el-col
                v-if="state.dispatchData.useMold"
                :md="8"
                :sm="12"
                style="margin-top: 12px"
                :xs="12"
              >
                <button class="tech-button" @click="toClick('moldUse')">
                  <vab-icon icon="speaker-3-fill" />
                  模具
                </button>
              </el-col>
              <el-col :md="8" :sm="12" style="margin-top: 12px" :xs="12">
                <button
                  :class="['tech-button']"
                  :disabled="!canReport"
                  @click="toClick('report')"
                >
                  <vab-icon icon="pages-line" />
                  报工
                </button>
              </el-col>
              <el-col :md="8" :sm="12" style="margin-top: 12px" :xs="12">
                <button class="tech-button">
                  <vab-icon
                    icon="task-line"
                    @click="toClick('finishDispatch')"
                  />
                  竣工
                </button>
              </el-col>
              <el-col :md="8" :sm="12" style="margin-top: 12px" :xs="12">
                <button class="tech-button" @click="toClick('pickMaterial')">
                  <vab-icon icon="logout-box-r-line" />
                  领料
                </button>
              </el-col>
              <el-col :md="8" :sm="12" style="margin-top: 12px" :xs="12">
                <button class="tech-button" @click="toClick('repairView')">
                  <vab-icon icon="hammer-line" />
                  报修
                </button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="report-content">
          <reportInspection ref="reportInspectionRef" />
          <moldUse ref="moldUseRef" />
          <reportView ref="reportViewRef" />
          <pickMaterial ref="pickMaterialRef" />
          <repairView ref="repairViewRef" />
        </div>
      </el-col>
    </el-row>
    <changeEqu ref="changeEquRef" @select-equ-callback="selectEquCallback" />
    <dispatchListDialog
      ref="dispatchListDialogRef"
      @set-dispatch-current-callback="setDispatchCurrentCallback"
    />
  </div>
</template>
<script setup>
  import reportInspection from './components/reportInspection.vue'
  import moldUse from './components/moldUse.vue'
  import reportView from './components/reportView.vue'
  import repairView from './components/repairView.vue'
  import pickMaterial from './components/pickMaterial.vue'
  import moldDispatchItem from './components/moldDispatchItem.vue'
  import changeEqu from './dialog/changeEqu.vue'
  import dispatchListDialog from './dialog/dispatchListDialog.vue'
  import {
    getUserEquipApi,
    getCurrentDispatchApi,
    getCurrentDispatchNomoldApi,
    dispatchJungongMoldApi,
  } from '@/api/mes/dispatch_api.ts'
  import dayjs from 'dayjs'
  const reportInspectionRef = ref(),
    changeEquRef = ref(),
    moldUseRef = ref(),
    reportViewRef = ref(),
    pickMaterialRef = ref(),
    dispatchListDialogRef = ref(),
    repairViewRef = ref()

  const $baseMessage = inject('$baseMessage'),
    $baseLoading = inject('$baseLoading'),
    $baseConfirm = inject('$baseConfirm')
  const state = reactive({
    currentDate: dayjs().format('YYYY-MM-DD'),
    nowTime: dayjs().format('HH:mm'),
    equipIndex: 0,
    equipData: {},
    equipmentEqlists: [],
    dispatchData: null,
  })

  const setDispatchCurrentCallback = () => {
    getCurrentDispatch()
  }

  const toChangeOrder = () => {
    dispatchListDialogRef.value.handleOpen(state.equipData)
  }

  const toChangeEqu = () => {
    changeEquRef.value.handleOpen(
      state.equipData.equipmentEqlists,
      state.equipIndex
    )
  }

  const toFinishDispatch = async () => {
    const load = $baseLoading()
    try {
      const { msg } = await dispatchJungongMoldApi({
        pkDispatchSeq: state.dispatchData.pkDispatchSeq,
      })
      load.close()
      $baseMessage(msg || '操作成功！', 'success')
      getCurrentDispatch()
    } catch (error) {
      load.close()
    }
  }

  const toClick = (btnCode) => {
    if (btnCode === 'finishDispatch') {
      $baseConfirm(
        '竣工后，任务将不在显示!',
        '确认竣工',
        () => {
          toFinishDispatch()
        },
        () => {},
        '确认',
        '取消'
      )
      return
    }
    reportInspectionRef.value.toHide()
    moldUseRef.value.toHide()
    reportViewRef.value.toHide()
    pickMaterialRef.value.toHide()
    repairViewRef.value.toHide()
    switch (btnCode) {
      case 'reportInspection':
        reportInspectionRef.value.toShow(state.dispatchData)
        break
      case 'moldUse':
        moldUseRef.value.toShow(state.dispatchData)
        break
      case 'report':
        reportViewRef.value.toShow(state.dispatchData, state.equipData)
        break
      case 'pickMaterial':
        pickMaterialRef.value.toShow(state.dispatchData)
        break
      case 'repairView':
        repairViewRef.value.toShow(state.dispatchData, state.equipData)
        break
    }
  }

  const canReport = computed(() => {
    // return true
    return (
      ((!state.equipData.useMold &&
        state.dispatchData &&
        state.dispatchData.isShoujian &&
        state.dispatchData.shoujianPass) ||
        !(
          state.equipData.useMold &&
          state.dispatchData &&
          state.dispatchData.isShoujian
        )) &&
      ((state.dispatchData &&
        state.equipData.useMold &&
        state.dispatchData.useMold) ||
        !(state.dispatchData && state.equipData.useMold))
    )
  })

  const getCurrentDispatch = async () => {
    if (state.equipData.useMold) {
      const { data } = await getCurrentDispatchApi({
        pkEqlist: state.equipData.pkEqlist,
      })
      data['opName'] = data?.dispatches?.[0].opName || ''
      state.dispatchData = data || null
    } else {
      const { data } = await getCurrentDispatchNomoldApi({
        pkEqlist: state.equipData.pkEqlist,
      })
      state.dispatchData = data || null
      console.log('getCurrentDispatch', data)
    }
  }

  const getUserEquip = async () => {
    const { data } = await getUserEquipApi({ equipIndex: state.equipIndex })
    if (data.equipmentEqlists && data.equipmentEqlists.length > 0) {
      data.equipmentEqlists.forEach((item, index) => {
        item['equIndex'] = index
      })
      state.equipmentEqlists = data.equipmentEqlists
      const temp = data.equipmentEqlists[state.equipIndex]
      state.equipData = {}
      Object.keys(data)
        .concat(Object.keys(temp))
        .forEach((key) => {
          state.equipData[key] = data[key] ? data[key] : temp[key] || data[key]
        })
      getCurrentDispatch()
    }
  }

  const selectEquCallback = (selectEquData) => {
    // console.log('selectEquData', selectEquData)
    state.equipIndex = selectEquData['equIndex']
    getUserEquip()
  }

  onMounted(() => {
    getUserEquip()
    window.reportManageTimer = setInterval(() => {
      state.nowTime = dayjs().format('HH:mm')
    }, 60000)
  })
  onUnmounted(() => {
    window.reportManageTimer && clearInterval(window.reportManageTimer)
  })
</script>
<style lang="scss" scoped>
  .report-manage-container {
    position: relative;
    background-image: linear-gradient(0deg, #191f34, #212232) !important;
    .report-options {
      position: relative;
      height: calc(-96px + 100vh);
      margin-bottom: 0;
      .equ-info {
        width: 100%;
        .equ-info-top {
          display: flex;
          flex-direction: row;
          height: 50px;
          background-color: #4bbf83;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          .equ-info-top-left {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            font-size: 16px;
            line-height: 20px;
            color: #ffffff;
            text-align: center;
            background: rgba(0, 0, 0, 0.2);
          }
          .equ-info-top-right {
            flex: 2;
            .equ-info-top-right-name {
              display: flex;
              font-size: 18px;
              line-height: 30px;
              color: #ffffff;
              border-bottom: 1px solid #ffffff;
              .name-label {
                flex: 1;
                margin: 0 6px;
              }
            }
          }
        }
        .equ-info-bottom {
          display: flex;
          flex-direction: row;
          line-height: 24px;
          background-color: #ffffff;
          border-bottom-right-radius: 5px;
          border-bottom-left-radius: 5px;
          .equ-info-bottom-user {
            flex: 1;
            font-size: 18px;
            color: #333333;
            text-align: center;
            background: rgba(0, 0, 0, 0.2);
          }
          .equ-info-bottom-fuuser {
            flex: 2;
            font-size: 14px;
            color: #555;
          }
        }
      }
      .dispatch-list-root {
        position: absolute;
        top: 80px;
        right: 0;
        bottom: 120px;
        left: 0;
      }
      .option-btns {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 120px;
        text-align: center;
      }
    }
    .report-content {
      position: relative;
      display: flex;
      flex-direction: column;
      height: calc(-96px + 100vh);
      margin-bottom: 0;
      // background-color: #ff00ff;
    }

    .tech-button {
      padding: 12px 8px;
      font-size: 16px;
      font-weight: bold;
      color: #191f34;
      cursor: pointer;
      background-color: #f6f2fa;
      // background: linear-gradient(145deg, #4fa3f7, #6ec1ff); /* 淡化颜色 */
      border: none;
      border-radius: 5px;
    }

    .tech-button:not([disabled]) {
      box-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4),
        -2px -2px 3px rgba(0, 0, 0, 0.6); /* 稍微减少阴影强度 */
      transition: all 0.3s ease;
    }

    .tech-button:not([disabled]):hover {
      background-color: #c5b0d9;
      // background: linear-gradient(145deg, #6ec1ff, #4fa3f7); /* 淡化后的渐变 */
      box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4),
        -1px -1px 2px rgba(0, 0, 0, 0.6);
      transform: translateY(-2px);
    }

    .tech-button:not([disabled]):active {
      box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.4);
      transform: translateY(2px);
    }

    .tech-button:disabled {
      background-color: #aaaaaa;
    }
  }
</style>
